<template>
  <div>
    <div class="chainAct" v-loading="fullscreenLoading">
      <div class="chainAct__top">
        <div class="chainAct__left">
          <div class="chainAct__top--tip" @click="addActivity">新增活动</div>
          <el-select
            v-model="selectValue"
            placeholder="全部状态"
            class="chainAct__top--select"
            @change="searchGetList"
          >
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-date-picker
            v-model="useDateValue"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:250px"
            @change="timeSure"
          ></el-date-picker>
        </div>
        <el-input
          style="width:170px;"
          placeholder="请输入关键词"
          v-model="activityName"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchGetList"
          ></el-button>
        </el-input>
      </div>
      <ActivityList
        :list="list"
        @close="close"
        @del="del"
        @edit="edit"
      ></ActivityList>
    </div>
    <PageManage
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PageManage>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ActivityList from "./ActivityList.vue";
import PageManage from "@/components/PageManage.vue";
import DateUtil from "@/store/modules/date";
import {
  getActivityList,
  closeActivityById,
  delActivityById,
} from "@/api/chainActivity/chainActivity";

@Component({
  components: {
    ActivityList,
    PageManage,
  },
})
export default class ActivityIndex extends Vue {
  statusList = [
    {
      value: "全部状态",
      id: "",
    },
    {
      value: "未开始",
      id: "0",
    },
    {
      value: "进行中",
      id: "1",
    },
    {
      value: "已结束",
      id: "2",
    },
  ];

  /** 接龙活动商品 */
  list = [];

  selectValue = "";

  useDateValue = [] as any;

  activityName = "";

  dateList = {
    startTime: "",
    endTime: "",
  };

  pageSize = 10;

  pageNum = 1;

  total = 0;

  fullscreenLoading = false;

  /**
   * 新增活动
   */
  addActivity() {
    this.$router.push({
      name: "AddChainActivity",
    });
  }

  mounted() {
    this.getList();
  }

  searchGetList() {
    this.pageNum = 1
    this.getList()
  }

  /**
   * 获取接龙活动列表
   */
  getList() {
    const param = {
      current: this.pageNum,
      size: this.pageSize,
      startTime: this.dateList.startTime,
      endTime: this.dateList.endTime,
      status: this.selectValue,
      name: this.activityName,
    };
    getActivityList(param).then(res => {
      this.list = res.data.list;
      this.total = res.data.total;
    });
  }

  /**
   * 选择活动时间
   */
  timeSure(e) {
    this.dateList.startTime = e ? new DateUtil("").getYMDs(e[0]) : "";
    this.dateList.endTime = e ? new DateUtil("").getYMDs(e[1]) : "";
    this.pageNum = 1
    this.getList();
  }

  /**
   * 编辑活动
   */
  edit(id) {
    this.$router.push({
      name: "AddChainActivity",
      query: { activityId: id },
    });
  }

  /**
   * 关闭活动
   */
  close(id) {
    this.$confirm(`确认关闭选中活动吗？关闭后接龙活动无法恢复`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      closeActivityById(id, {})
        .then(() => {
          this.$message.success("关闭成功");
          this.getList();
        })
        .catch(err => {
          this.$message.error(err || "网络错误");
        });
    });
  }

  /**
   * 删除活动
   */
  del(id) {
    this.$confirm(`确认删除选中活动吗？删除后接龙活动无法恢复`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      delActivityById(id, {})
        .then(() => {
          this.$message.success("删除成功");
          this.getList();
        })
        .catch(err => {
          this.$message.error(err || "网络错误");
        });
    });
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageSize = val;
    this.pageNum = 1
    this.getList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.pageNum = val;
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
@include b(chainAct) {
  width: 100%;
  padding: 15px;
  background-color: #f9f9f9;
  @include e(top) {
    height: 80px;
    width: 100%;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    background-color: white;
    justify-content: space-between;

    .chainAct__left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 500px;
    }

    @include m(tip) {
      width: 100px;
      height: 38px;
      display: flex;
      align-items: center;
      border: 1px solid #2d8cf0;
      color: #2d8cf0;
      justify-content: center;
      border-radius: 5px;
      cursor: pointer;
    }
    @include m(select) {
      width: 100px;
    }
  }
}

/deep/ .el-input--small .el-input__inner {
  height: 38px;
}

/deep/ .el-range-editor--small.el-input__inner {
  height: 38px;
}

/deep/ .el-loading-spinner {
  top: 6%;
}
</style>
